// 扩展vue原有的功能： 全局组件 自定义指令 挂载原型方法  （注释：vue3没有全局过滤器）
// vue2 插件写法概要：导出一个对象，有install函数，默认传入vue构造函数，vue基础之上扩展
// vue3 插件写法概要：导出一个对象，有install函数，默认传入app应用实例，在app之上进行扩展

// import xtxSkeleton from './xtx-skeleton.vue'
// import xtxCarousel from './xtx-carousel.vue'
// import xtxMore from './xtx-more.vue'
// import xtxBread from './xtx-bread.vue'
// import xtxBreadItem from './xtx-bread-item.vue'

// 默认图片
import defaultImg from '@/assets/images/200.png'
import Confirm from './Confirm'
import Message from './Message'
// 批量导入library下的所有组件
// 批量导入需要使用一个函数 require.context(dir,deep,matching)
// 参数：1.目录 2.是否加载子目录 3.加载的正则匹配

const importFn = require.context('./', false, /\.vue$/)

export default {
  install (app) {
    // 在app之上进行扩展，app提供component directive函数
    // 如果要挂载原型，app.config.globalProperties 方式
    // app.component(xtxSkeleton.name, xtxSkeleton)
    // app.component(xtxCarousel.name, xtxCarousel)
    // app.component(xtxMore.name, xtxMore)
    // app.component(xtxBread.name, xtxBread)
    // app.component(xtxBreadItem.name, xtxBreadItem)

    importFn.keys().forEach(key => {
      // 导入组件  default是指默认导出
      const component = importFn(key).default
      // 注册组件
      app.component(component.name, component)
    })

    // 自定义指令
    defineDirective(app)

    // 如果想挂载到全局属性，能够通过组件实例调用属性， this.$message
    app.config.globalProperties.$confirm = Confirm
    app.config.globalProperties.$message = Message
  }
}

// const observer = IntersectionObserver(callback[,options])
// callback：被观察的dom进入可视区或者离开可视区都会触发
// 其中有两个参数：entries，observer
// entries => 被观察的元素信息对象的数组[{元素信息}],信息中的isIntersecting 是判断是否进入或离开
// observer => 被观察实例
// options:配置参数
// 三个配置属性 root rootMargin threshold
// root => 基于滚动的容器，默认是document
// rootMargin => 容器有没有外边距
// threshold => 交叉边界的比例

// 实例中提供的两个方法
// observer(dom) => 观察哪个dom容器
// unobserver(dom) => 停止观察哪个dom容器

const defineDirective = (app) => {
  // vue2.0 监听使用指令的DOM是否创建好，使用钩子函数：inserted
  // vue3.0 的指令拥有的钩子函数和组件的一样，使用指令的DOM是否创建好，钩子函数：onMounted

  // 图片懒加载指令
  app.directive('lazy', {
    mounted (el, binding) {
      // 创建观察对象实例
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // isIntersecting： 判断是离开还是进入
        if (isIntersecting) {
          observer.unobserve(el)

          // 如果加载的图片数据有错误，则使用默认的图片加载
          el.onerror = () => {
            el.src = defaultImg
          }

          el.src = binding.value
        }
      }, {
        // 设置视图交界触发点
        threshold: 0.01
      })

      // 设置需要观察的DOM元素
      observer.observe(el)
    }
  })
}
